<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>statistics</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
		<div>
			<div>
				<p>
					<s:radio list="#{1:'SD',2:'JX',3:'GD'}" name="code" value="1"></s:radio>
				</p>
				From Date:
				<button onclick="changeFD(-10)" title="减十">&lt;&lt;</button>
				<button onclick="changeFD(-1)" title="减一">&lt;</button>
				<s:textfield name="fromDate" cssStyle="width:80px;"></s:textfield>
				<button onclick="changeFD(1)" title="加一">&gt;</button>
				<button onclick="changeFD(10)" title="加十">&gt;&gt;</button>
				To Date:
				<button onclick="changeTD(-10)" title="减十">&lt;&lt;</button>
				<button onclick="changeTD(-1)" title="减一">&lt;</button>
				<s:textfield name="toDate" cssStyle="width:80px;"></s:textfield>
				<button onclick="changeTD(1)" title="加一">&gt;</button>
				<button onclick="changeTD(10)" title="加十">&gt;&gt;</button>
				<button onclick="changeFTD(-1)" title="减一">&lt;-</button>
				<button onclick="changeFTD(1)" title="加一">-&gt;</button>
				<button onclick="changeFTD(-10)" title="减十">&lt;&lt;--</button>
				<button onclick="changeFTD(10)" title="加十">--&gt;&gt;</button>
				<button type="button" onclick="fetchData()">search</button>
			</div>
			<hr />
			<div>
				N: <button onclick="changeN(-1)" title="减一">-</button><b id="n_id">5</b><button onclick="changeN(1)" title="加一">+</button>,
				M: <button onclick="changeM(-1)" title="减一">-</button><b id="m_id">3</b><button onclick="changeM(1)" title="加一">+</button>,
				L: <button onclick="changeL(-1)" title="减一">-</button><b id="l_id">1</b><button onclick="changeL(1)" title="加一">+</button>,
				<input type="checkbox" id="continuedbox" checked="checked" onclick="changeContinued()" /><label for="continuedbox">Continued</label>
			</div>
			<div id="graph1"></div>
			<hr />
			<div>
				<input type="radio" name="statisticsType" id="first" onclick="drawZXN(1)" /><label for="first">First</label>
				<input type="radio" name="statisticsType" id="second" onclick="drawZXN(2)" /><label for="second">Second</label>
				<input type="radio" name="statisticsType" id="third" onclick="drawZXN(3)" /><label for="third">Third</label>
				<input type="radio" name="statisticsType" id="three" onclick="drawZX()" /><label for="three">Before Three</label>
				<input type="radio" name="statisticsType" id="all" onclick="drawZXALL()" /><label for="all">All</label>
			</div>
			<div id="graph2"></div>
			<hr />
			<div>
				Kuadu: <button onclick="changeKD(-1)" title="减一">-</button><b id="kd_id">1</b><button onclick="changeKD(1)" title="加一">+</button>
				<input type="checkbox" id="showbox" onclick="changeShow()" /><label for="showbox">Show</label>
			</div>
			<div id="graph3"></div>
		</div>
		
		<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="../js/Raphael-2.1.0.js"></script>
		<script type="text/javascript">
			var noArr = <s:property value="codeList"/>, paper1, paper2;
			drawIOGraph();
			$("input:radio[name=statisticsType]:checked").click();
			
			function fetchData() {
				var fd = $("#fromDate").val(), td = $("#toDate").val(), code = $("input:radio[name=code]:checked").val();
				var t = /^\d{4}\-\d{2}\-\d{2}/;
				if (!t.test(fd)) {
					alert("Please correctly input the From Date!");
					return;
				}
				if (!t.test(td)) {
					alert("Please correctly input the To Date!");
					return;
				}
				if (fd > td) {
					alert("The To Date can't be before the From Date!");
					return;
				}
				var params = {fromDate: fd, toDate: td, code: code};
				$.ajax({
					url: "qn-data.action",
					type: "post",
					data: params,
					dataType: "json",
					success: function(respData) {
						noArr = respData.codeList;
						drawIOGraph();
						$("input:radio[name=statisticsType]:checked").click();
						changeKD(0);
					}
				});
			}
			
			function changeFD(i) {
				changeD($("#fromDate"), i);
			}
			
			function changeTD(i) {
				changeD($("#toDate"), i);
			}
			
			function changeFTD(i) {
				changeFD(i);
				changeTD(i);
			}
			
			function changeD($input, i) {
				var dateStr = $input.val();
				if (/^\d{4}\-\d{2}\-\d{2}/.test(dateStr)) {
					var date = addDateStr(dateStr, i);
					$input.val(date);
				}
			}
			
			function changeN(i) {
				var n = parseInt($("#n_id").html());
				if (n + i > 0) {
					$("#n_id").html(n + i);
					drawIOGraph();
				}
			}
			
			function changeM(i) {
				var m = parseInt($("#m_id").html());
				if (m + i >= 0) {
					$("#m_id").html(m + i);
					drawIOGraph();
				}
			}
			
			function changeL(i) {
				var l = parseInt($("#l_id").html());
				if (l + i > 0) {
					$("#l_id").html(l + i);
					drawIOGraph();
				}
			}
			
			function changeKD(i) {
				var kd = parseInt($("#kd_id").html());
				if (kd + i > 0 && kd + i < 11) {
					$("#kd_id").html(kd + i);
					if ($("#showbox")[0].checked) {
						drawQEZXXLYL();
					}
				}
			}
			
			function changeContinued() {
				drawIOGraph();
			}
			
			function changeShow() {
				if ($("#showbox")[0].checked) {
					drawQEZXXLYL();
				}
			}
			
			function drawCoordinate(a, b, an, bn, sw, ak) {
				var pathArr = ["M", sw + 0.5, sw + 0.5, "L", a * (an - 1) + sw + 0.5, sw + 0.5, "L", a * (an - 1) + sw + 0.5, b * (bn - 1) + sw + 0.5, "L", sw + 0.5, b * (bn - 1) + sw + 0.5, "L", sw + 0.5, sw + 0.5];
				for (var i = 1; i < bn - 1; i++) {
					pathArr = pathArr.concat(["M", sw + 0.5, b * i + sw + 0.5, "H", a * (an - 1) + sw + 0.5]);
				}
				for (var i = 1; i < an - 1; i++) {
					pathArr = pathArr.concat(["M", a * i + sw + 0.5, sw + 0.5, "V", b * (bn - 1) + sw + 0.5]);
				}
				paper1.path(pathArr.join(","));
				var k = Math.floor(bn / 2);
				for (var i = 0; i < bn; i++) {
					paper1.text(sw - 15, b * i + sw, (k - i) * ak);
				}
				for (var i = 1; i < an; i++) {
					paper1.text(a * i + sw, b * (bn - 1) + sw + 15, i);
				}
			}
			
			function drawIOGraph() {
				if (paper1) {
					paper1.remove();
				}
				var data = getQEZXXLYLData().slice(0, -1);
				var n = parseInt($("#n_id").html());
				var m = parseInt($("#m_id").html());
				var l = parseInt($("#l_id").html());
				var continued = $("#continuedbox")[0].checked;
				var ioData = getIOData(data, n, m, l, continued);
				var sumData = getSumData(ioData.outs, ioData.ins);
				var len = ioData.outs.length;
				var a = 30, b = 20, an = len + 3, bn = 21, sw = 30, ak = getAK(ioData, sumData, bn);
				paper1 = Raphael("graph1", a * an + sw * 2, b * bn + sw * 2);
				drawCoordinate(a, b, an, bn, sw, ak);
				
				drawIOLineChart(a, b, an, bn, sw, ak, ioData, sumData);
			}
			
			function drawIOLineChart(a, b, an, bn, sw, ak, ioData, sumData) {
				var outData = ioData.outs;
				var inData = ioData.ins;
				var r = 3, w = 1, c = Math.floor(bn / 2), d, color;
				
				d = -outData[0] / ak;
				color = "#F00";
				paper1.circle(a + sw + 0.5, b * (c - d) + sw + 0.5, r).attr({"stroke": color, "fill": color, "title": -outData[0]});
				pathArr = ["M", a + sw + 0.5, b * (c - d) + sw + 0.5];
				for (var i = 1; i < outData.length; i++) {
					d = -outData[i] / ak;
					paper1.circle(a * (i + 1) + sw + 0.5, b * (c - d) + sw + 0.5, r).attr({"stroke": color, "fill": color, "title": -outData[i]});
					pathArr = pathArr.concat(["L", a * (i + 1) + sw + 0.5, b * (c - d) + sw + 0.5]);
				}
				paper1.path(pathArr.join(",")).attr({"stroke": color, "stroke-width": w});
				
				d = inData[0] / ak;
				color = "#0F0";
				paper1.circle(a + sw + 0.5, b * (c - d) + sw + 0.5, r).attr({"stroke": color, "fill": color, "title": inData[0]});
				pathArr = ["M", a + sw + 0.5, b * (c - d) + sw + 0.5];
				for (var i = 1; i < inData.length; i++) {
					d = inData[i] / ak;
					paper1.circle(a * (i + 1) + sw + 0.5, b * (c - d) + sw + 0.5, r).attr({"stroke": color, "fill": color, "title": inData[i]});
					pathArr = pathArr.concat(["L", a * (i + 1) + sw + 0.5, b * (c - d) + sw + 0.5]);
				}
				paper1.path(pathArr.join(",")).attr({"stroke": color, "stroke-width": w});
				
				if (sumData) {
					d = sumData[0] / ak;
					color = "#00F";
					paper1.circle(a + sw + 0.5, b * (c - d) + sw + 0.5, r).attr({"stroke": color, "fill": color, "title": sumData[0]});
					pathArr = ["M", a + sw + 0.5, b * (c - d) + sw + 0.5];
					for (var i = 1; i < sumData.length; i++) {
						d = sumData[i] / ak;
						paper1.circle(a * (i + 1) + sw + 0.5, b * (c - d) + sw + 0.5, r).attr({"stroke": color, "fill": color, "title": sumData[i]});
						pathArr = pathArr.concat(["L", a * (i + 1) + sw + 0.5, b * (c - d) + sw + 0.5]);
					}
					paper1.path(pathArr.join(",")).attr({"stroke": color, "stroke-width": w});
				}
			}
			
			function getAK(ioData, sumData, bn) {
				var omax = 0, imax = 0, smax = 0;
				for (var i = 0; i < ioData.outs.length; i++) {
					omax = Math.max(omax, ioData.outs[i]);
					imax = Math.max(imax, ioData.ins[i]);
				}
				omax = Math.max(omax, imax)
				for (var i = 0; i < sumData.length; i++) {
					omax = Math.max(omax, sumData[i] < 0 ? -sumData[i] : sumData[i]);
				}
				var k = Math.floor(bn / 2);
				return Math.ceil(omax / (k * 100)) * 100;
			}
			
			function getIOData(data, n, m, l, continued) { 
				var outData = [], inData = [];
				for (var i = 0; i < data.length; i++) {
					var sout = 0, sin = 0;
					var qi = data[i];
					qi = qi - m;
					if (qi < 1) {
						continue;
					}
					if (n >= qi) {
						sout = 20 * ((1 << qi) - 1);
						sin = 65 * (1 << (qi - 1));
					} else {
						sout = 20 * ((1 << n) - 1);
						sin = 0;
						if (continued) {
							while ((qi = qi - n) > 0) {
								if (n >= qi) {
									sout += 20 * ((1 << qi) - 1) * l;
									sin += 65 * (1 << (qi - 1)) * l;
									break;
								} else {
									sout += 20 * ((1 << n) - 1) * l;
									sin += 0;
								}
							}
						}
					}
					outData.push(sout);
					inData.push(sin);
				}
				return {outs: outData, ins: inData};
			}
			
			function getSumData(outData, inData) {
				var sumData = [];
				var sum = 0;
				for (var i = 0; i < outData.length; i++) {
					sum += -outData[i] + inData[i];
					sumData.push(sum);
				}
				return sumData;
			}
			
			function drawZXN(n) {
				if (paper2) {
					paper2.remove();
				}
				var data = getZXNData(n);
				var a = 30, b = 20, an = data.length + 3, bn = 11, sw = 30;
				paper2 = Raphael("graph2", a * an + sw * 2, b * bn + sw * 2);
				drawGrid(a, b, an, bn, sw);
				drawLineChart(a, b, an, bn, sw, data);
			}
			
			function drawZX() {
				if (paper2) {
					paper2.remove();
				}
				var data = getZXNData(1);
				var a = 30, b = 20, an = data.length + 3, bn = 11, sw = 30;
				paper2 = Raphael("graph2", a * an + sw * 2, b * bn + sw * 2);
				drawGrid(a, b, an, bn, sw);
				drawLineChart(a, b, an, bn, sw, data, "#F00");
				
				data = getZXNData(2);
				drawGrid(a, b, an, bn, sw);
				drawLineChart(a, b, an, bn, sw, data, "#0F0");
				
				data = getZXNData(3);
				drawGrid(a, b, an, bn, sw);
				drawLineChart(a, b, an, bn, sw, data, "#00F");
			}
			
			function drawZXALL() {
				drawZX();
				
				data = getZXNData(4);
				var a = 30, b = 20, an = data.length + 3, bn = 11, sw = 30;
				drawGrid(a, b, an, bn, sw);
				drawLineChart(a, b, an, bn, sw, data, "#FF0");
				
				data = getZXNData(5);
				drawGrid(a, b, an, bn, sw);
				drawLineChart(a, b, an, bn, sw, data, "#0FF");
			}
			
			function getZXNData(n) {
				var data = [];
				for (var i = 0; i < noArr.length; i++) {
					data.push(noArr[i][n - 1]);
				}
				return data;
			}
			
			function drawQEZXXLYL() {
				if (paper2) {
					paper2.remove();
				}
				var data = getQEZXXLYLData();
				var len = data.length;
				var a = 30, b = 20, an = len + 3, bn = 35, sw = 30;
				paper2 = Raphael("graph3", a * an + sw * 2, b * bn + sw * 2);
				drawGrid(a, b, an, bn, sw);
				drawLineChart(a, b, an, bn, sw, data.slice(0, -1));
				paper2.circle(a * (len - 1) + sw + 0.5, b * (bn - data[len - 1]) + sw + 0.5, 5).attr({"fill": "#F00", "stroke": "#F00", "title": data[len - 1]});
				paper2.path(["M", a * (len - 2) + sw + 0.5, b * (bn - data[len - 2]) + sw + 0.5, "L", a * (len - 1) + sw + 0.5, b * (bn - data[len - 1]) + sw + 0.5].join(",")).attr({"stroke-width": 2, "stroke": "#F00"});
			}
			
			function getQEZXXLYLData() {
				var data = [];
				var i = 0, last = -1, kd = parseInt($("#kd_id").html());
				for (; i < noArr.length; i++) {
					var n1 = noArr[i][0];
					var n2 = noArr[i][1];
					if (n1 - n2 == 3 || n1 - n2 == -3 || n1 - n2 == 4 || n1 - n2 == -4) {
						if (last == -1) {
							last = i;
							continue;
						}
						data.push(i - last);
						last = i;
					}
				}
				data.push(i - last);
				return data;
			}
			
			function drawGrid(a, b, an, bn, sw) {
				var pathArr = ["M", sw + 0.5, sw + 0.5, "L", a * (an - 1) + sw + 0.5, sw + 0.5, "L", a * (an - 1) + sw + 0.5, b * (bn - 1) + sw + 0.5, "L", sw + 0.5, b * (bn - 1) + sw + 0.5, "L", sw + 0.5, sw + 0.5];
				for (var i = 1; i < bn - 1; i++) {
					pathArr = pathArr.concat(["M", sw + 0.5, b * i + sw + 0.5, "H", a * (an - 1) + sw + 0.5]);
				}
				for (var i = 1; i < an - 1; i++) {
					pathArr = pathArr.concat(["M", a * i + sw + 0.5, sw + 0.5, "V", b * (bn - 1) + sw + 0.5]);
				}
				paper2.path(pathArr.join(","));
				for (var i = 0; i < bn; i++) {
					paper2.text(sw - 10, b * i + sw, bn - i);
				}
				for (var i = 0; i < an; i++) {
					paper2.text(a * i + sw, b * (bn - 1) + sw + 15, i + 1);
				}
			}
			
			function drawLineChart(a, b, an, bn, sw, data, color) {
				if (!color) {
					color = "#000";
				}
				paper2.circle(sw + 0.5, b * (bn - data[0]) + sw + 0.5, 5).attr({"stroke": color, "fill": color, "title": data[0]});
				pathArr = ["M", sw + 0.5, b * (bn - data[0]) + sw + 0.5];
				for (var i = 1; i < data.length; i++) {
					paper2.circle(a * i + sw + 0.5, b * (bn - data[i]) + sw + 0.5, 5).attr({"stroke": color, "fill": color, "title": data[i]});
					pathArr = pathArr.concat(["L", a * i + sw + 0.5, b * (bn - data[i]) + sw + 0.5]);
				}
				paper2.path(pathArr.join(",")).attr({"stroke": color, "stroke-width": 2});
			}
			
			function strToDate(str) {
				var dateStrs = str.split("-");
				var year = parseInt(dateStrs[0], 10);
				var month = parseInt(dateStrs[1], 10) - 1;
				var day = parseInt(dateStrs[2], 10);
				var date = new Date(year, month, day);
				return date;
			}
			
			function dateToStr(date) {
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				if (month < 10) {
					month = "0" + month;
				}
				if (day < 10) {
					day = "0" + day;
				}
				return year + "-" + month + "-" + day;
			}
			
			function addDateStr(str, n) {
				var date = strToDate(str);
				date.setDate(date.getDate() + n);
				return dateToStr(date);
			}

	 	</script>
	</body>
</html>
